import { Button, Dropdown, Space, message } from 'antd'
import { DownOutlined, UserOutlined } from '@ant-design/icons'
import { useDispatch, useSelector } from '@/store'
import { setLanguage } from '@/store/modules/global'

export default function MoreButton(props) {
  const dispatch = useDispatch()
  const { language } = useSelector((state) => state.global)

  const handleMenuClick = (e) => {
    if (e.key === '1') {
      dispatch(setLanguage('zh'))
    }
    if (e.key === '2') {
      dispatch(setLanguage('en'))
    }
  }
  const items = [
    {
      label: '简体中文',
      key: '1',
      disabled: language === 'zh',
    },
    {
      label: 'English',
      key: '2',
      disabled: language === 'en',
    },
  ]
  const menuProps = {
    items,
    onClick: handleMenuClick,
  }
  return (
    <Dropdown menu={menuProps}>
      <Button>
        <Space>
          语言
          <DownOutlined />
        </Space>
      </Button>
    </Dropdown>
  )
}
